/*
To customize the look and feel of Ionic, you can override the variables
in ionic's _variables.scss file.

For example, you might change some of the default colors:

$light:                           #fff !default;
$stable:                          #f8f8f8 !default;
$positive:                        #387ef5 !default;
$calm:                            #11c1f3 !default;
$balanced:                        #33cd5f !default;
$energized:                       #ffc900 !default;
$assertive:                       #ef473a !default;
$royal:                           #886aea !default;
$dark:                            #444 !default;
*/
.patt-holder {
  /* background: #eeeff3; */
  -ms-touch-action: none; }

.patt-wrap {
  position: relative;
  cursor: pointer; }

.patt-wrap ul,
.patt-wrap li {
  list-style: none;
  margin: 0;
  padding: 0; }

.patt-circ {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  border: 2px solid #99aab4;
  /* background: #eeeff3; */
  z-index: 1; }

.patt-circ.hovered {
  border: 1px solid #ff0000; }

.patt-error .patt-circ.hovered {
  border: 2px solid #ff0000; }
  .patt-error .patt-circ.hovered .patt-dots {
    background: #ff0000; }

.patt-hidden .patt-circ.hovered {
  border: 0; }

.patt-dots {
  background: none;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -5px;
  margin-left: -5px; }

li.hovered > .patt-dots {
  background: #ff0000;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -8px;
  margin-left: -8px; }

.patt-lines {
  border-radius: 5px;
  height: 4px;
  background: #ff0000;
  position: absolute;
  transform-origin: 5px 2px;
  -ms-transform-origin: 5px 2px;
  /* IE 9 */
  -webkit-transform-origin: 5px 2px;
  margin-top: 3px; }

.patt-hidden .patt-lines {
  display: none; }
